
<style scoped>
.handle-box {
    margin-bottom: 20px;
}
.custom-tree-node {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  ::v-deep .el-upload--text{
    width: auto;
  }
</style>
<!-- tsx -->
<template>
    <div class="package">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-tickets"></i> 分 类 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-input
                    clearable
                    v-model="query.name"
                    style="width: 200px; margin: 0 20px 0 0"
                    placeholder="名称"
                    class="handle-input mr10"
                ></el-input>
                <!-- <el-select class="handle-input mr10" 
                    style="width: 200px; margin: 0 20px 0 0" clearable v-model="query.treeNo"></el-select> -->
                <el-button type="primary" @click="getList">搜索</el-button>
                <el-button type="primary" @click="showTree = true">分类树</el-button>
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
                <el-table-column prop="parentName" width="150" label="父节点名称" align="center"></el-table-column>
                <el-table-column prop="name" label="分类名称" align="center">
                    <!-- <template slot-scope="scope">
                    <span v-if="scope.row.accountTypeName == 10" style="color:#ed1941">支出</span>
                    <span v-if="scope.row.accountTypeName == 20" style="color:#45b97c">收入</span>
                  </template> -->
                </el-table-column>
                <el-table-column prop="resourceImg" label="分类图标" width="150" align="center">
                    <template slot-scope="scope">
                        <el-image
                            style="border-ridius: 50%; margin: 0 5px; width: 50px; height: 50px"
                            :src="scope.row.resourceImg"
                        >
                        </el-image>
                  </template>
                </el-table-column>
                <el-table-column prop="treeNo" label="树节点" width="100" align="center">
                    <!-- <template slot-scope="scope">
                    {{ scope.row.category | tyepFilter }}
                  </template> -->
                </el-table-column>
                <el-table-column align="center" prop="isRecommend" label="是否推荐" :formatter="formatBoolean"
                                 :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="levelOrder" label="排序" width="100" align="center"></el-table-column>
                <el-table-column prop="createdOn" label="创建时间" width="150" align="center"></el-table-column>
                <el-table-column label="操作" width="150" align="center" >
                    <template slot-scope="scope">
                        <el-button size="mini" type="warning" @click="update(scope.row)">修改</el-button>
                        <el-button size="mini" type="danger" @click="remove({},scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    @size-change="sizeChange"
                    @current-change="pageChange"
                    :current-page="query.pageIndex"
                    :page-sizes="[20, 50, 100, 200]"
                    :page-size="query.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageTotal"
                >
                </el-pagination>
            </div>
        </div>
        <el-dialog title="分类树" :visible.sync="showTree" width="80%">
            <el-button style="margin: 0 0 20px" size="mini" type="primary" @click="append({ id: '' })">新增根目录</el-button>
            <el-button style="margin: 0 0 20px 20px" size="mini" type="danger" @click="deleteAllId">批量删除</el-button>
            <el-tree @check-change="handleCheckChange" show-checkbox :data="data" node-key="id" default-expand-all :expand-on-click-node="false">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span style="display: flex; align-items: center">
                        <el-image
                            style="border-ridius: 50%; margin: 0 5px; width: 20px; height: 20px"
                            v-show="data.resourceImg"
                            :src="data.resourceImg"
                        >
                        </el-image>
                        <span>{{ data.name }}</span>
                    </span>
                    <span>
                        <el-button type="text" size="mini" @click="() => append(data)"> 新增 </el-button>
                        <el-button type="text" size="mini" @click="() => update(data)"> 修改 </el-button>
                        <el-button type="text" size="mini" @click="() => remove(node, data)"> 删除 </el-button>
                    </span>
                </span>
            </el-tree>
        </el-dialog>

        <el-dialog title="分类树" :visible.sync="addTree" width="400px">
            <el-form ref="send" :model="addFrom" label-width="100px" style="width:50%">
                <el-form-item label="分类图标:">
                    <el-upload
                      :action="$url"
                      class="avatar-uploader"
                      :data="{'fileCategory': 10}"
                      :show-file-list="false"
                      :on-success="handleAddResourceImgSuccess">
                      <img v-if="addFrom.resourceImg" class="avatar" :src="addFrom.resourceImg" alt="">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="分类名称:">
                    <el-input v-model="addFrom.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="是否推荐:">
                    <el-checkbox v-model="addFrom.isRecommend"></el-checkbox>
                </el-form-item>
                <el-form-item label="排序:">
                    <el-input v-model="addFrom.levelOrder" style="width: 200px"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addTree = false">取 消</el-button>
                <el-button type="primary" @click="addOneTree">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="分类树" :visible.sync="showEdit" width="400px">
            <el-form ref="send" :model="editFrom" label-width="100px">
                <el-form-item label="分类图标:" label-width="100px" style="width:50%">
                    <el-upload
                      :action="$url"
                      class="avatar-uploader"
                      :data="{'fileCategory': 10}"
                      :show-file-list="false"
                      :on-success="handleEditResourceImgSuccess">
                      <img v-if="editFrom.resourceImg" class="avatar" :src="editFrom.resourceImg" alt="">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="分类名称:">
                    <el-input v-model="editFrom.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="是否推荐:">
                    <el-checkbox v-model="editFrom.isRecommend"></el-checkbox>
                </el-form-item>
                <el-form-item label="排序:">
                    <el-input v-model="editFrom.levelOrder" style="width: 200px"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showEdit = false">取 消</el-button>
                <el-button type="primary" @click="editOneTree">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script >
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { PagingCategory, BuildTree, AddCategory, CategoryInfo, UpdateCategory, DeleteOneCategory,DeleteMoreCategory } from '@/api/category';
export default {
    // import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        // 这里存放数据
        return {
            query: {
                pageIndex: 1,
                pageSize: 20,
                name: '',
                treeNo: ''
            },
            addTree: false,
            tableData: [],
            pageTotal: 0,
            treeList: [],
            showTree: false,
            addFrom: {},
            data: [],
            editFrom: {},
            showEdit: false,
            deleteArr:[]
        };
    },
    // 过滤器
    filters: {},
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 方法集合
    methods: {
        formatBoolean: function (row, column, cellValue) {
                var ret = ''  //你想在页面展示的值
                if (cellValue) {
                    ret = "是"  //根据自己的需求设定
                } else {
                    ret = "否"
                }
                return ret;
            },
        deleteAllId() {
            console.log(this.deleteArr)
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    DeleteMoreCategory({ ids: this.deleteArr }).then((res) => {
                            this.$message.success('成功');
                            this.getList();
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        handleCheckChange(e) {
            this.deleteArr.push(e.id)
        },
        editOneTree() {
            UpdateCategory(this.editFrom).then((res) => {
                if (res.RequestStatus == 200) {
                    this.$message.success('成功');
                    this.getList();
                    this.showEdit = false;
                    this.editFrom = {};
                }
            });
        },
        update(data) {
            // this.editFrom = true
            // this.addFrom.parentID = data.id
            CategoryInfo({ id: data.id }).then((res) => {
                this.showEdit = true;
                this.editFrom = res.Data;
            });
        },
        addOneTree() {
            AddCategory(this.addFrom).then((res) => {
                console.log(res);
                if (res.RequestStatus == 200) {
                    this.$message.success('成功');
                    this.getList();
                    this.addTree = false;
                    this.addFrom = {};
                }
            });
        },
        handleEditResourceImgSuccess(res){
        this.$set(this.editFrom,'resourceImg',this.$baseUrl + res.Data.url)
        },
        handleAddResourceImgSuccess(file) {
            this.$set(this.addFrom, 'resourceImg', this.$url + file.Data.url);
        },
        append(data) {
            this.addTree = true;
            this.addFrom.parentID = data.id;
        },

        remove(node, data) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    DeleteOneCategory({ id: data.id }).then((res) => {
                        
                            this.$message.success('成功');
                            this.getList();
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        pageChange(e) {
            this.query.pageIndex = e;
            this.getList();
        },
        getList() {
            PagingCategory(this.query).then((res) => {
                this.tableData = res.Data.list;
                this.pageTotal = res.Data.paging.totalItemCount;
            });
            BuildTree().then((res) => {
                console.log(res);
                this.data = res.Data.dictCategory;
            });
        },
        sizeChange(e) {
            this.query.pageSize = e;
            this.getList();
        },
        searchDetail(row) {}
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.getList();
    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, // 生命周期 - 创建之前
    beforeMount() {}, // 生命周期 - 挂载之前
    beforeUpdate() {}, // 生命周期 - 更新之前
    updated() {}, // 生命周期 - 更新之后
    beforeDestroy() {}, // 生命周期 - 销毁之前
    destroyed() {}, // 生命周期 - 销毁完成
    ctivated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>